var loadedImageCount = 0;
var page = 0;
//  var isDone = true;


//到底加载下一页数据

cnt.onscroll = function(){
    var st = cnt.scrollTop; //0
    var ch = cnt.clientHeight;//1136
    var sh = cnt.scrollHeight;

    var isDaoDi = st + ch >= sh  ;
    if(isDaoDi&&!diXian){

        loadNextPageData();
    }
    loadRealImage();
};


loadNextPageData();



//点击回到头部
function toTop(){
    $("#cnt").animate({ scrollTop: 0 }, 500);
}

function loadNextPageData(){

    page++;

    if(page>=2){
        loading2.style.display = "block";
    }

    // var pageCount = (page-1)*44+4900;
    var pageCount = (page-1)*44;
    //  var pageCount = 4996;
    // 1 ==> 0
    // 2 ==> 44
    // 3 ==> 88
    // 4 ==>132
    // d1.style.display = "flex";


    //isDone = false;


    if(searchlan.value ==""){
        $.ajax(
            {
                url:"https://s.taobao.com/search?data-key=s" +
                "&data-value="+pageCount+"&ajax=true" +
                "&_ksTS=1530243656560_891" +
                "&q=%E7%94%B7%E9%9E%8B&refpid=" +
                "430267_1006&source=tbsy&" +
                "style=grid&tab=all&" +
                "pvid=b8318040521666151a70a5f3eebd88c3" +
                "&clk1=0bf0718470c87df17b328af7d5f0e69e" +
                "&spm=a21bo.2017.201856-sline." +
                "2.5af911d9RRzslq&bcoffset=0" +
                "&p4ppushleft=3%2C44",

                dataType:"jsonp",
                success:function(data){
                    console.log(data);
                    loadData(data);
                    // console.log(data);
                }
            }
        );
    }else{
        $("div.product").hide();
        $.ajax(
            {
                url:"https://s.taobao.com/search?data-key=s&data-value="+pageCount
                +"&ajax=true&_ksTS=1529648718877_878&q="+searchlan.value
                +"&refpid=430270_1006&source=tbsy&style=grid&tab=all&pvid=a2082eddc67e7e7d53c0d939a1696a43&clk1=530f456ac120508b6b0e620ad53bd5d1&spm=a21bo.2017.201856-sline.5.5af911d913n65k&bcoffset=0&p4ppushleft=3%2C44",
                dataType:"jsonp",
                success:function(data){
                    console.log(data);
                    loadData(data);
                    // console.log(data);
                }
            }
        );
    }

}
var diXian;

function loadData(data){
    // productArr 是产品信息数组
    if(!data.mods.itemlist.data){
        if(!diXian) {
            diXian = document.createElement("div");
            diXian.innerHTML = "我是有底线的";
            diXian.style.textAlign = "center";
            diXian.style.padding = "0.5rem";
            document.body.appendChild(diXian);
            loading2.style.display = "none";
        }
        d1.style.display = "none";
        return;
    }

    var productArr = data.mods.itemlist.data.auctions;



    for(var i=0;i<productArr.length;i++){
        // p 就是某一个件商品
        var p = productArr[i];
        var productDiv = document.createElement("div");
        productDiv.className = "product fl";

        var image = document.createElement("img");
        //image.src = "http:" + p.pic_url+"_180x180.jpg_.webp";
        // image.src = "http:" + p.pic_url;
        image.setAttribute("real_image_src","http:" + p.pic_url+"_180x180.jpg");
        image.src = "images/dot.png";
        var titleDiv = document.createElement("div");
        titleDiv.innerHTML = p.title;
        titleDiv.style.margin = "0.25rem 0";
        var priceDiv = document.createElement("span");
        priceDiv.innerHTML = "&yen;" + p.view_price;
        priceDiv.style.float = "left";
        priceDiv.style.color = "orangered";

        var personDiv = document.createElement("span");
        personDiv.innerHTML = p.view_sales;
        personDiv.style.float = "right";

        productDiv.appendChild(image);
        productDiv.appendChild(titleDiv);
        productDiv.appendChild(priceDiv);
        productDiv.appendChild(personDiv);

        productDiv.p = p;
        // 单击某一件商品
        productDiv.onclick = function(){
            // 跳转商品详情页
            // JSON.stringify(p) 将p这个对象转成JSON字符串

            localStorage.setItem("currentP",JSON.stringify(this.p));
            location = "item.html";
        };

        productList.appendChild(productDiv);
    }

    //  isDone = true;

    // productList.getElementsByTagName("img");
    // jquery 充分使用了css3 选择器来作为选择元素的方法
    // onclick = load();
    // onmouseover = mouseover();
    // onload = load();
    // 原生JS事件写法
//       d1.onclick = function(){
//
//       }
    // jQuery 事件写法
//       $("#d1").click(function(){
//
//       });

    // img 有一个事件名为onload ，意思是当图片加载完成后执行
    loadedImageCount = 0;



    $("#productList img").load(
        function(){
            loadedImageCount++;

            // console.log(loadedImageCount);
            if(productArr.length==loadedImageCount){
                console.log("所有图片加载完毕！");
                // 在1秒内让该元素淡入出现
                $("#productList").fadeIn(400);
                //加载真实图片
                loadRealImage();
                d1.style.display = "none";

            }
        }
    );

}

function loadRealImage(){
    var images = productList.getElementsByTagName("img");
    // 这三十六张图
    // 首先俺们要显示在可视区域的图片


    var st = cnt.scrollTop; //0
    var ch = cnt.clientHeight;//1136
    var sh = cnt.scrollHeight;

    // 某元素离顶部距离加上该元素的高度，如果这个结果小于 1136,
    // 该元素就完全在可视区域
    // pic 是一个普通图片元素

    for(var i=0;i<images.length;i++) {
        var picParent = images[i].parentNode;
        //eleheight 元素高度
        var eleheight = $(picParent).height();
        //eleOffsetTop 元素离顶部距离
        var eleOffsetTop = $(picParent).offset().top;

        if(eleOffsetTop-st<ch){
            if(images[i].getAttribute("real_image_src")) {
                images[i].src = images[i].getAttribute("real_image_src");
                images[i].setAttribute("real_image_src", "");
                images[i].style.opacity = 1;
            }

        }
    }
}



aa.onclick = function(){
    loadNextPageData();
};